<template>
  <div class="home-bank">
    <div class="top-wrap">
      <div class="top" id="top">
        <div class="top-left fl">
          <img src="../../images/co-bank/logo_.png" alt="" class="logo">
        </div>
        <div class="top-right fr">
          <a href="#about">关于我们</a>
          <div v-if="!name" class="btn-link" @click="linkTo('/login')"><a class="button">注册/登录</a></div>
          <div style="float:right" v-if="name">
            <div class="r-block logout r-pointer" @click="loginOut()"><span class="fa fa-sign-out">退出登录</span></div>
            <div class="r-block separator"><span>|</span></div>
            <div class="r-block nikname">你好，{{name}}</div>
          </div>
          <div v-if="name" class="r-block separator"><span>|</span></div>
          <div v-if="name" @click="handleLink" style="margin-left:20px" class="r-block r-pointer"><span style="margin-right:12px;color: #D1D1D1;">|</span> 管理中心</div>
        </div>
      </div>
      <div class="banner" id="banner">
        <!-- <div class="swiper-wrap">
          <el-carousel>
            <el-carousel-item v-if="bannerArr.length" v-for="(item,index) in bannerArr" :key="index">
              <a :href="item.link?item.link:'#'" :style="'cursor:pointer;height:100%;display: block;background-image: url(' + item.src + ');background-size: 100% 100%;background-repeat:no-repeat;background-position:center;'"></a>
            </el-carousel-item>
          </el-carousel>
        </div> -->
        <div class="banner-c bd swiper-container" id="swiper-banner">
          <ul class="swiper-wrapper">
            <li class="swiper-slide li5" data-index="">
              <a style="width: 100%;height: 100%;display:inline-block;"></a>
            </li>
            <li class="swiper-slide li2" data-index="">
            </li>
            <li class="swiper-slide li4" data-index="">
            </li>
            <!-- <li class="swiper-slide li3" data-index="">
            </li> -->
            <!-- <li class="swiper-slide li1" data-index="">
            </li> -->
          </ul>
          <div class="pagination"></div>
        </div>
      </div>
      <div class="total-num">
        <div class="total-list">
          <div class="list-num iconfont"><span class="num">
              <v-countup :duration="3" :start-value="start" :end-value="end"></v-countup>
            </span><span class="num-name">家</span> </div>
          <div class="list-name">入驻企业</div>
        </div>
        <div class="total-list">
          <div class="list-num iconfont"><span class="num">
              <v-countup :duration="3" :start-value="start" :end-value="end1"></v-countup>
            </span><span class="num-name">次</span> </div>
          <div class="list-name">融资服务</div>
        </div>
        <div class="total-list iconfont">
          <div class="list-num"><span class="num">
              <v-countup :duration="3" :start-value="0" :decimals="2" :end-value="end2"></v-countup>
            </span><span class="num-name">亿</span></div>
          <div class="list-name">授信金额</div>
        </div>
      </div>
      <div id="about" class="service" style="margin-top: 80px;">
        <div class="title wow fadeInUp">
          <div class="desc">BAOUT US</div>
          <div class="name">关于我们</div>
          <div class="title-line"><img src="../../images/co-bank/line.png"></div>
        </div>
      </div>
      <div id="" class="about-wrap service">
        <div class="about-box">
          <div class="about-content">
            <div class="about-title">上海科荟融信息科技有限公司</div>
            <div class="about-desc">上海科荟融信息科技有限公司是一家致力于服务张江科学城乃至整个浦东新区中小科创企业而设立的金融科技公司，“科荟融”凭借与各家合作银行的多元化科技贷款产品为依托，以及公司自身强大的数据分析能力，通过系统端展开信贷信息收集，智能诊断、智能匹配、智能数据风控，为不同发展阶段的科技型企业提供全成长周期的智能贷顾服务。</div>
          </div>
          <div>
            <a href="/">
              <div class="analyse"></div>
              <div class="analyse-go">go</div>
              <div class="analyse-word">预贷客户画像分析</div>
            </a>
          </div>
        </div>
      </div>
      <div class="product-service service wow fadeInUp">
        <div class="title">
          <div class="desc">SERVICE CONTENT</div>
          <div class="name">服务内容</div>
          <div class="title-line"><img src="../../images/co-bank/line.png"></div>
        </div>
        <div class="service-wrap">
          <div class="service-loan " id="cardArea" style="width: 100%;overflow: hidden;margin-top: 30px;">
            <div class="_service-title">核心服务</div>
            <div class="service-item card-item active">
              <div class="service-list fl">
                <div class="item-first">
                  <img v-for="(item,index) in dataList[0].photoFiles" :key="index" :src="item.fileUrl" alt="">
                </div>
                <div class="service-infos item-second item fr">
                  <div class="infos">
                    <div class="infos-title">{{dataList[0].productName}}</div>
                    <div class="infos-desc" v-html="dataList[0].memo"></div>
                    <a @click="linkTo('/productDetail',dataList[0].id)" class="service-btn">立即申请</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="service-item card-item">
              <div class="service-list fl">
                <div class="service-infos item-second item">
                  <div class="infos">
                    <div class="infos-title">解决痛点</div>
                    <div class="infos-desc">1、不同差异化的科技贷款产品无法精准匹配到有实际需求的企业。<br>2、不同业态与不同发展阶段的企业无法找到最适合的银行信贷服务。<br>3、银行业务端缺乏必要的交互，因此企业更需要获得全成长周期的专业贷顾服务，而并不仅是申报一笔贷款业务。<br>4、通过Co-bank系统的数据获取、数据沉淀、数据更新，极大提高申贷业务流程的便捷与效率，银行等金融机构严格按照线上标准化流程给予节点信息反馈，规避传统线下业务对接时所碰到的诸多问题。</div>
                  </div>
                </div>
                <div class="item-first peo-right fr">
                  <img src="../../images/co-bank/data.png" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="price-wrap service wow fadeInUp">
        <div class="_service-title" style="margin: 20px auto 10px;">风险贷款</div>
        <div class="service-info">
          <a href="https://www.chuangchao.org/" class=" wow fadeInUp"><img src="../../images/co-bank/chaungchao1.jpg" class="chaungchao"></a>
          <video-player class="video-player-box vjs-big-play-centered video-style" ref="videoPlayer" :options="playerOptions" :playsinline="true" customEventName="customstatechangedeventname">
            Your browser does not support the video tag.
          </video-player>
          <div class="price-info wow fadeInUp">
            <div class="info-title box box-align-center">
              <div class="icon"></div>{{dataList[1].productName}}
            </div>
            <div class="info-detail">
              <div v-html="dataList[1].memo"></div>
              <a @click="linkTo('/productDetail',dataList[1].id)" class="service-btn">立即申请</a>
            </div>
          </div>
        </div>
      </div>
      <div class="service-case service jarallax testimonial">
        <div class="title wow fadeInUp">
          <div class="desc">SERVICE CASE</div>
          <div class="name">服务案例</div>
          <div class="title-line"><img src="../../images/co-bank/line.png"></div>
        </div>
        <div class="case-swiper" style="width: 1200px;margin: 0 auto;position: relative;">
          <button type="button" class="swipe-arrow swipe-left fl"><i class="iconfont">&#xe61a;</i></button>
          <button type="button" class="swipe-arrow swipe-right fr"><i class="iconfont">&#xe61c;</i></button>
          <div class="swiper-container case-item" id="case">
            <div class="swiper-wrapper">
              <div class="swiper-slide case-list">
                <img src="../../images/co-bank/botu1.jpg" alt="" class="botu">
                <div class="list-detail">
                  <div class="case-head box box-align-center">
                    <img src="../../images/co-bank/logo1.png" alt="" class="logo">上海瀚正信息科技股份有限公司
                  </div>
                  <div class="case-box">
                    <div class="case-wrap">
                      <div class="case-desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上海瀚正信息科技股份有限公司是一家从事智慧城市、物联网、移动互联网相关应用软件开发、销售、系统集成和技术服务的高新技术企业。 公司具有雄厚的技术底蕴和市场资源，集软件产品研发、技术服务、产品销售为一体；可为用户提供先进的、具有独立知识产权的软硬件系列产品、行业完整解决方案和专业的技术服务。尤其针对公安、司法、城管、学校等行业和领域，具有深厚的底蕴。产品基于云计算架构和移动互联网技术，引领客户需求，强调用户体验，功能创新、系统健壮可靠，具有很强的竞争力。 公司位于上海市张江高科技园区浦东软件园内，同高等院校以及科研院所有着紧密的合作关系，在产品研发过程中，通过联合开发设计、技术引进、合作开发等多种方式，使研发成果尽快转化为生产力，也进一步提高了公司产品的竞争力。 公...
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide case-list">
                <img src="../../images/co-bank/botu2.png" alt="" class="botu">
                <div class="list-detail">
                  <div class="case-head box box-align-center">
                    <img src="../../images/co-bank/logo2.png" alt="" class="logo">上海阖煦微波技术有限公司
                  </div>
                  <div class="case-box">
                    <div class="case-wrap">
                      <div class="case-desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上海阖煦微波技术有限公司是一家专业从事微波传输领域产品设计开发、生产和服务的高科技公司，产品主要涉及矩形软波导、椭圆软波导、射频电缆及组件、铁氧体器件及其它微波器件。公司的产品广泛应用于移动通信、卫星通信、医疗行业和军工市场等领域。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司拥有一批开发设计、运营管理、市场开拓、工程服务等方面的具有丰富经验的老专家和技术骨干，并联合国内著名大学、研究所的科研力量，他们长期从事微波产品的设计开发与生产，不仅理论水平高，而且还有丰富的实践经验，事业心强，有强烈社会责任感和进取心，弘扬“以客户为中心，以长期奋斗者为本，全力以赴，尽心尽力，不断创新”的公司文化，同甘共苦，愿与公司共发展。
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide case-list">
                <img src="../../images/co-bank/_botu3.jpg" alt="" class="botu">
                <div class="list-detail">
                  <div class="case-head box box-align-center">
                    <img src="../../images/co-bank/logo3.png" alt="" class="logo">上海易之景和环境技术股份有限公司
                  </div>
                  <div class="case-box">
                    <div class="case-wrap">
                      <div class="case-desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上海易之景和环境技术股份有限公司，是一家集环保技术研发、环保设 备生产、环保产品销售为一体的专业公司。多年来专注于零排污智能环保厕 所、车载厕所、污水处理系统的研发、生产、销售及运营管理，在技术研 发、产品销售、服务保障方面均处于国内领先地位。
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide case-list">
                <img src="../../images/co-bank/botu3.jpg" alt="" class="botu">
                <div class="list-detail">
                  <div class="case-head box box-align-center">
                    <img src="../../images/co-bank/logo4.png" alt="" style="width: 80px;" class="logo">上海喜泊客信息技术有限公司
                  </div>
                  <div class="case-box">
                    <div class="case-wrap">
                      <div class="case-desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上海喜泊客信息技术有限公司（EZParking）成立于2009年，是一个以“互联网+”停车为核心的城市级智慧停车运营商。 公司总部位于上海张江高科技园区，在杭州、北京、武汉及德国杜塞尔多夫都有分支机构，总人数超过100。喜泊客作为国内停车数据管理平台的拥有者，数据覆盖全国30个城市，包含35000条数据。平台拥有2款产品及2项服务，运营并支撑政府智慧停车项目及公共停车场、物业自有停车场以及搭载智慧停车车载系统的车等。</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide case-list">
                <img src="../../images/co-bank/botu4.png" alt="" class="botu">
                <div class="list-detail">
                  <div class="case-head box box-align-center">
                    <img src="../../images/co-bank/logo5.png" alt="" class="logo">上海永乐数码科技股份有限公司
                  </div>
                  <div class="case-box">
                    <div class="case-wrap">
                      <div class="case-desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上海永乐数码科技有限公司为拓展中国及东南亚市场业务，采用强强联合模式，是一家专门从事四维特效影院设计、开发、生产、集成的专业公司。公司于2005年6月28日在上海市张江高科技园区注册成立。 已获得深圳华侨城集团投资的北京欢乐谷森林主题公园、浙江省科技馆、成都金沙遗址博物馆等大型的4D影院项目，更于07年初在广州长隆欢乐世界建造了全亚洲最大的400座的4D影院，获得了良好的市场美誉度。</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide case-list">
                <img src="../../images/co-bank/botu5.jpg" alt="" class="botu">
                <div class="list-detail">
                  <div class="case-head box box-align-center">
                    <img src="../../images/co-bank/logo6.png" alt="" class="logo">上海狂龙数字科技股份有限公司
                  </div>
                  <div class="case-box">

                    <div class="case-wrap">
                      <div class="case-desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上海狂龙数字科技股份有限公司（简称：狂龙数字）是国内最早的交互应用服务提供商，拥有最长的行业探索和研发历史，2015年成功登陆新三板。狂龙数字一直致力于新场景互联网平台的搭建和运营。多年的探索与积累，狂龙数字认为交互应用的真谛，不是单纯的视觉、触控、体感互动，而是将空间、创意、体验围绕用户，融合技术、应用数据的成果。狂龙数字最清楚如何应用智慧交互技术解决客户和行业的痛点。这是狂龙数字制胜领先的密码。</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide case-list">
                <img src="../../images/co-bank/botu6.jpg" alt="" class="botu">
                <div class="list-detail">
                  <div class="case-head box box-align-center">
                    <img src="../../images/co-bank/logo7.png" alt="" class="logo">上海寰熙医疗器械有限公司
                  </div>
                  <div class="case-box">
                    <div class="case-wrap">
                      <div class="case-desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上海寰熙医疗器械有限公司是一家专业经营销售医疗设备的公司，位于上海市浦东新区。公司经营并代理国内外知名品牌医疗设备，主营医用体检、诊断、急救、化验、超声放射、医学分析、生命科学、消毒灭菌、康复治疗、手术室、急救室、诊疗室等医疗设备。公司凭借其医疗产品销售实力，以良好的信誉，诚信的经营，所销售产品质量第一，服务第一的准则，赢得广大用户及合作伙伴的支持和信赖。我公司的服务宗旨是：客户至上，品质保证，诚信为本！</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide case-list">
                <img src="../../images/co-bank/botu8.jpg" alt="" class="botu">
                <div class="list-detail">
                  <div class="case-head box box-align-center">
                    <img src="../../images/co-bank/logo8.png" alt="" class="logo">卓宝信息科技（上海）股份有限公司
                  </div>
                  <div class="case-box">
                    <div class="case-wrap">
                      <div class="case-desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;卓宝信息科技（上海）股份有限公司成立于2012年11月，公司为高新技术企业，并致力于成为中国特色小镇智慧建设产业引领者。公司总部及国内研发基地均设立在上海，并在美国加州、日本横滨设立研发中心。公司整合全球资源，将国外智慧城镇建设成功案例及智能信息化前沿技术融入智慧建设理念，打造中国特色小镇智慧建设。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司核心人员由国内外从事智慧建设精英、IT行业精英、资深工程师组成。并在智慧建设、软件研发领域拥有丰富工作经验，并取得显著成就。国际视野、领先理念、技术实力确立了公司在智慧建设领域的领先优势，全力打造最具特色，具有竞争力的智慧化建设解决方案。智慧建设</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide case-list">
                <img src="../../images/co-bank/botu10.png" alt="" class="botu">
                <div class="list-detail">
                  <div class="case-head box box-align-center">
                    <img src="../../images/co-bank/logo10.png" alt="" class="logo">长腿熊快递收发站
                  </div>
                  <div class="case-box">
                    <div class="case-wrap">
                      <div class="case-desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长腿熊业务起始于2013年，并于2014年3月在北京成立公司，于2015年8月将总部正式迁往上海，现在北京和上海均设有研发中心。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长腿熊起初只是个单纯的快递信息管理系统，在客户需求的驱动下我们延伸到线下的代取件业务及商务楼的整体收发业务，现在北京、上海、广州均有业务覆盖。<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;长腿熊不仅对单家客户创造价值，其联合就近客户所带来的集约化对快递行业整体效率的提升和成本结构的优化都起到非常重要的作用，对于大楼安全和电梯资源的节省也有积极意义。</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="swiper-slide case-list">
                <img src="../../images/co-bank/botu9.jpg" alt="" class="botu">
                <div class="list-detail">
                  <div class="case-head box box-align-center">
                    <img src="../../images/co-bank/logo9.png" alt="" style="width: 80px;" class="logo">上海黑弧数码传媒股份有限公司
                  </div>
                  <div class="case-box">
                    <div class="case-wrap">
                      <div class="case-desc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国首家基于价值消费为核心，以社区为单位，以文化内容体验为基础，以智能价值计算法为驱动的，在具精准用户画像的数据价值消费平台上，而衍生的社群经济和精准数据媒体的通路平台。<br>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国内地唯一具有全国布局及全国服务能力的房地产专业行销机构，同时也是最大规模的专业行销机构。目前在北上广深、成都、苏州、西安、天津等地设有分支机构。每年接触超过700个不同的房地产项目及服务超过100个项目。在重点城市的前20强的房地产品牌，黒弧数码的市场占有率超过70%。</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

      <!-- <div class="news-wrap service ">
        <div class="title wow fadeInUp">
          <div class="desc">NEWS INFORMATION</div>
          <div class="name">新闻资讯</div>
          <div class="title-line"><img src="../../images/co-bank/line.png"></div>
        </div>
        <div class="_news-content wow fadeInUp">
          <div class="news-left fl">
            <div class="news-list">
              <h1>- 新闻资讯</h1>
              <div class="list">
                <a href="http://www.sipo.gov.cn/dtxx/1124178.htm" target="blank" class="news-title">知更鸟知识产权银行，在国家知识产权局的报道</a>
                <span class="news-time">2018-05-10</span>
              </div>
              <div class="list">
                <a href="http://www.jiading.gov.cn/zwpd/zwdt/content_495819" target="blank" class="news-title">“知更鸟”知识产权银行在南翔智地成立</a>
                <span class="news-time">2018-04-27</span>
              </div>
              <div class="list">
                <a href="http://www.jiading.gov.cn/zwpd/zwdt/content_495819" target="blank" class="news-title">“知更鸟”知识产权银行在南翔智地成立</a>
                <span class="news-time">2018-04-27</span>
              </div>
            </div>
          </div>
          <div class="news-right fr">
            <div class="swiper-container" id="news-swiper" style="width: 790px;height: 380px;">
              <div class="swiper-wrapper">
                <div class="swiper-slide" style="">
                  <div class="news_t fl">
                    <a href="/a/xinwenzixun/xingyexinwen/28.html">
                      <img src="../../images/co-bank/news3.jpg" style="width: 400px;height: 260px">
                    </a>
                  </div>
                  <div class="wz_list fr">
                    <h1>- 新闻动态</h1>
                    <div class="last">
                      <a href="http://www.sipa.gov.cn/zscqj/jdqzscqj/20180504/8299.html">嘉定区推动成立“知更鸟”知识产权银行</a>
                      <span class="time">2018-05-04</span>
                      <p class="detail">4月26日,嘉定区举办“知更鸟”知识产权银行成立发布会上海市知识产权局副局长季晓烨，嘉定区委常委、副区长沈华棣等出席活动并讲话。</p>
                    </div>
                  </div>
                </div>
                <div class="swiper-slide" style="">
                  <div class="news_t fl">
                    <a href="/a/xinwenzixun/xingyexinwen/28.html">
                      <img src="../../images/co-bank/news3.jpg" style="width: 400px;height: 260px">
                    </a>
                  </div>
                  <div class="wz_list fr">
                    <h1>- 新闻动态</h1>
                    <div class="last">
                      <a href="http://www.sipa.gov.cn/zscqj/jdqzscqj/20180504/8299.html">嘉定区推动成立“知更鸟”知识产权银行</a>
                      <span class="time">2018-05-04</span>
                      <p class="detail">4月26日,嘉定区举办“知更鸟”知识产权银行成立发布会上海市知识产权局副局长季晓烨，嘉定区委常委、副区长沈华棣等出席活动并讲话。</p>
                    </div>
                  </div>
                </div>
                <div class="swiper-slide" style="">
                  <div class="news_t fl">
                    <a href="/a/xinwenzixun/xingyexinwen/28.html">
                      <img src="../../images/co-bank/news3.jpg" style="width: 400px;height: 260px">
                    </a>
                  </div>
                  <div class="wz_list fr">
                    <h1>- 新闻动态</h1>
                    <div class="last">
                      <a href="http://www.sipa.gov.cn/zscqj/jdqzscqj/20180504/8299.html">嘉定区推动成立“知更鸟”知识产权银行</a>
                      <span class="time">2018-05-04</span>
                      <p class="detail">4月26日,嘉定区举办“知更鸟”知识产权银行成立发布会上海市知识产权局副局长季晓烨，嘉定区委常委、副区长沈华棣等出席活动并讲话。</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="pagination"></div>
            </div>
          </div>
        </div>
      </div> -->

      <div class="agency-wrap service">
        <div class="title wow fadeInUp">
          <div class="desc">COOPERATIVE ANGENCY</div>
          <div class="name">合作机构</div>
          <div class="title-line"><img src="../../images/co-bank/line.png"></div>
        </div>
        <div class="agency-content">
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank1.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank2.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank3.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank4.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank5.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank6.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank7.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank8.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank9.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank19.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank10.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank11.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank12.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank13.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank14.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank15.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank16.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank17.png" alt=""></div>
          <div class="agency-list wow fadeInUp"><img src="../../images/co-bank/bank/bank18.png" alt=""></div>

        </div>
      </div>
      <div class="footer">
        <div class="footer-wrap">
          <div class="footer-logo"><img src="../../images/co-bank/logo.png" alt="" class="logo"></div>
          <div class="footer-info">
            <p>地址：上海市浦东新区盛夏路570号902-G室</p>
            <p>©2018 上海科荟融信息科技有限公司版权所有 All Right Reserved | 沪ICP备18035585号-1</p>
            <p>技术支持： 上海逗米数字传媒科技有限公司</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "swiper/dist/css/swiper.min.css";
import Swiper from "swiper";
import { WOW } from "wowjs";
let CONSTANT = require("../../constant/constant.js"),
  common = require("../../common.js"),
  config = require("../../config/config.js");
export default {
  data() {
    return {
      dataList: [
        {
          photoFiles: []
        },
        {
          photoFiles: []
        }
      ],
      configObj: "",
      name: "",
      bannerArr: [
        {
          src: require("../../images/co-bank/banner5.jpg"),
          link: "http://www.shuiloutai.com/login"
        },
        { src: require("../../images/co-bank/banner2.jpg"), link: "" },
        { src: require("../../images/co-bank/banner4.jpg"), link: "" }
      ],
      start: 1,
      end: 317,
      end1: 382,
      end2: 1.25,
      newsIndex: 0,
      playerOptions: {
        // videojs options
        muted: false,
        language: "en",
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        width: 360,
        h: 280,
        sources: [
          {
            type: "video/mp4",
            src:
              "http://1252042124.vod2.myqcloud.com/8bddf4bevodtransgzp1252042124/58f103ca5285890781017806190/v.f20.mp4"
          }
        ],
        poster: require("../../images/co-bank/poster.jpg")
      }
    };
  },
  created() {
    let arr = location.hostname.split(".");
    let urlName = arr[0] == "www" ? arr[1] : arr[0];
    this.configObj = config.urlObjs[urlName];
    this.name = common.getCookie("nickname");
    console.log(this.name);
  },
  components: {
    "v-countup": () => import("vue-countupjs")
  },
  mounted() {
    new WOW().init();

    var swiper = new Swiper("#swiper-banner", {
      watchSlidesProgress: true,
      spaceBetween: 500,
      slidesPerView: "auto",
      effect: "fade",
      autoplay: 5000,
      loop: true
    });
    var swiper = new Swiper("#news-swiper", {
      // watchSlidesProgress: true,
      // spaceBetween: 500,
      slidesPerView: "auto",
      autoplay: 2000,
      loop: true,
      pagination: "#news-swiper .pagination"
    });
    var ydSwiper = new Swiper("#case", {
      centeredSlides: true,
      slidesPerView: "auto",
      spaceBetween: 40,
      autoplay: 2000,
      loop: true,
      prevButton: ".service-case .swipe-left",
      nextButton: ".service-case .swipe-right"
    });
    this.getProductPage();
  },
  methods: {
    linkTo(link, id) {
      this.$router.push({ path: link, query: { id: id } });
    },
    getProductPage() {
      let url = CONSTANT.URL.WEB.FINDFINANCEBYPAGE,
        data = {},
        dataForm = {
          pageIndex: 1,
          pageSize: 5
        };
      common.requestAjax(url, JSON.stringify(data), dataForm, res => {
        if (res.status == 200) {
          this.dataList = res.data.bussData;
        } else {
        }
      });
    },
    handleLink() {
      const userType = common.getCookie("userType");
      if (userType == "company") {
        this.linkTo("/ccOrderHand");
      } else if (userType == "channel") {
        this.linkTo("/channelOrderHand");
      } else {
        this.linkTo("/bankBankOrderHand");
      }
      localStorage.removeItem("defaultOpened");
    },
    loginOut() {
      common.setCookie("sessionId", "");
      common.setCookie("nickname", "");
      this.$nextTick(() => {
        this.$router.replace("/login");
      });
    }
  }
};
</script>

<style lang="scss">
@font-face {
  font-family: iconfont;
  src: url("../../font/iconfont.eot");
  src: url("../../font/iconfont.eot?#iefix") format("embedded-opentype"),
    url("../../font/iconfont.woff") format("woff"),
    url("../../font/iconfont.ttf") format("truetype"),
    url("../../font/iconfont.svg#iconfont") format("svg");
}

.fl {
  float: left !important;
}
.fr {
  float: right !important;
}
.iconfont {
  font-family: iconfont !important;
  font-style: normal;
  font-size: 16px;
  vertical-align: middle;
}
/* CSS Document */
/* 占位符颜色 */
input::-webkit-input-placeholder {
  color: #ccc;
}
input:-moz-placeholder {
  color: #ccc;
}
input::-moz-placeholder {
  color: #ccc;
}
input:-ms-input-placeholder {
  color: #ccc;
}
html {
  width: 100%;
  height: 100%;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 16px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  /*min-width: 1200px;*/
}
/*头部*/
@media only screen and (min-width: 320px) and (max-width: 820px) {
  #top {
    min-width: 1200px;
    /*padding: 0 20px;*/
  }
}
.home-bank {
  min-width: 1200px;
  background: #f7f9fb;
  background: #f7f9fb;
}
.top-wrap {
  width: 100%;
  height: 80px;
}
#top {
  width: 1200px;
  height: 80px;
  font-size: 14px;
  line-height: 80px;
  margin: 0 auto;
  overflow: hidden;
}
#top .top-left .logo {
  margin-top: 5px;
  width: 150px;
}
#top .top-right {
  .r-pointer {
    cursor: pointer;
  }
  .r-block {
    float: right;
    font-size: 14px;
    span {
      margin-left: -6px;
      &:before {
        position: relative;
        right: 6px;
      }
    }
    .r-inline {
      float: right;
      margin-left: 20px;
    }
    .regist {
      width: 60px;
      height: 26px;
      background-color: #ed7018;
      text-align: center;
      border-radius: 13px;
      position: relative;
      top: 7px;
      line-height: 28px;
      margin-left: 0px;
      color: white;
    }
  }
  .nikname {
    color: #666666;
  }
  .logout {
    color: #000000;
    font-weight: bold;
  }
  .separator {
    margin-left: 23px;
    margin-right: 23px;
    color: #d1d1d1;
  }
}
#top .top-right a {
  font-size: 16px;
  color: #292929;
  margin-left: 30px;
}
#top .top-right a:hover {
  color: #3d7db5;
}
#top .btn-link {
  width: 92px;
  height: 28px;
  border-radius: 5px;
  /*background-color: #3d7db5;*/
  color: #fff;
  text-align: center;
  line-height: 28px;
  margin-top: 26px;
  margin-left: 33px;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  cursor: pointer;
  float: right;
}
#banner {
  width: 100%;
  height: 500px;
  min-width: 1200px;
}
#banner .swiper-wrap {
  width: 100%;
  height: 500px;
  min-width: 1200px;
}
#banner .el-carousel {
  width: 100%;
  height: 500px;
}
#banner .el-carousel .el-carousel__container {
  height: 500px;
}
#banner .el-carousel .el-carousel__item {
  height: 500px;
}
#banner .el-carousel .el-carousel__indicators {
  display: none;
}
#banner .el-carousel .el-carousel__container button {
  display: none;
}
.swiper-container {
  width: 100%;
  height: 500px;
  color: #fff;
  text-align: center;
  position: relative;
}
.swiper-container li.swiper-slide {
  cursor: pointer;
  display: block;
  background: #f7f9fb;
  /*background-image: url(../../images/co-bank/banner.jpg);*/
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.swiper-container li.swiper-slide.li1 {
  background-image: url(../../images/co-bank/banner.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
.swiper-container li.swiper-slide.li2 {
  background-image: url(../../images/co-bank/banner2.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
.swiper-container li.swiper-slide.li3 {
  background-image: url(../../images/co-bank/banner3.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
.swiper-container li.swiper-slide.li4 {
  background-image: url(../../images/co-bank/banner4.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
.swiper-container li.swiper-slide.li5 {
  background-image: url(../../images/co-bank/banner5.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
}
.swiper-container .swiper-slide img.botu {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  transition: all 1.2s;
}
.swiper-container .pagination {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: 10px;
}
.swiper-container .swiper-pagination-switch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 8px;
  background: #fff;
  margin-right: 10px;
  /*opacity: 1;*/
  /*border: 1px solid #fff;*/
  cursor: pointer;
}
.swiper-container .swiper-active-switch {
  background: #ed7018;
}
.swiper-container .btn-swipe {
  position: absolute;
  z-index: 20;
  /*left: 50%;*/
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}

.swiper-container .btn-swipe .swipe-arrow {
  width: 60px;
  height: 60px;
  background-color: rgba(220, 100, 20, 0.2);
  border: 1px solid #ed7018;
  display: none;
  color: #ed7018;
}
.swiper-container .btn-swipe .swipe-arrow .iconfont {
  font-size: 18px;
}
.swiper-container .btn-swipe .swipe-arrow {
  outline: 0;
  padding: 0;
  margin: 0;
  height: 60px;
  width: 60px;
  cursor: pointer;
  transition: 0.3s;
  border-radius: 50%;
  z-index: 10;
  text-align: center;
}
.swiper-container .btn-swipe .swipe-arrow:hover {
  background-color: #ed7018 !important;
  color: #fff !important;
}
.swiper-container:hover .btn-swipe .swipe-arrow {
  display: block;
}
.swiper-container .btn-swipe .swipe-left {
  float: left;
  margin-left: 20px;
}
.swiper-container .btn-swipe .swipe-right {
  float: right;
  margin-right: 20px;
}

/*@media screen and (max-width: 1440px)*/
.home-bank .total-num {
  height: 100px;
  padding-top: 20px;
  padding-bottom: 25px;
}
.home-bank .total-num {
  position: relative;
  width: 1200px;
  height: 120px;
  background-color: #fff;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  margin: -72px auto 0;
  z-index: 100;
  -webkit-box-shadow: 5px 18px 35px rgba(0, 0, 0, 0.06);
  box-shadow: 5px 18px 35px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  padding-top: 40px;
  padding-bottom: 30px;
}
.home-bank .total-num .total-list {
  float: left;
  font-size: 20px;
  color: #666;
  width: 33.33%;
  height: 110px;
  text-align: center;
  border-right: 1px solid #d1d1d1;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.home-bank .total-num .total-list .list-num span.num {
  font-size: 50px;
  color: #3d7db5;
}
.home-bank .total-num .total-list .list-num span.num-name {
  position: relative;
  top: -10px;
  margin-left: 12px;
  display: inline-block;
  height: 40px;
  line-height: 40px;
}
.home-bank .total-num .total-list .list-name {
  font-size: 16px;
  color: #333;
}
.home-bank .total-num .total-list:last-child {
  border: none;
}
.home-bank .product-service {
  /*background-color: #fff;*/
  /*padding-bottom: 80px;*/
  width: 1200px;
  margin: 90px auto 0;
}
.home-bank .service .title {
  text-align: center;
  color: #cbcbcb;
  font-size: 20px;
}
.home-bank .service ._service-title {
  width: 1195px;
  margin: 0 auto;
  text-indent: 10px;
  font-size: 24px;
  font-weight: bold;
  height: 24px;
  line-height: 20px;
  color: #403f3f;
  border-left: 5px solid #3d7db5;
}
.home-bank .service .title .name {
  display: inline-block;
  color: #262626;
  font-size: 30px;
  font-weight: 700;
}
.home-bank .service .title .desc {
  margin-bottom: 10px;
  font-size: 16px;
}
.home-bank .product-service .service-wrap {
  overflow: hidden;
}
.home-bank .product-service .service-wrap .service-title {
  position: relative;
  margin: 10px 0;
  height: 18px;
  line-height: 18px;
  color: #262626;
  font-size: 16px;
  padding-left: 5px;
  font-weight: 700;
  border-left: 5px solid #262626;
}
.home-bank
  .product-service
  .service-wrap
  .service-item
  .service-list:first-child {
  margin-left: 0;
}

.home-bank .product-service .service-wrap .service-item .service-list {
  position: relative;
  width: 375px;
  /*float: left;*/
  margin-left: 14px;
}
.home-bank
  .product-service
  .service-wrap
  .service-loan
  .service-item
  .service-list {
  width: 100%;
  height: 100%;
  background: #fff;
}
.home-bank .product-service .service-wrap .service-item .service-list img {
  width: 100%;
  height: 100%;
  float: left;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
  cursor: pointer;
  vertical-align: initial;
}
.home-bank
  .product-service
  .service-wrap
  .service-item
  .service-list
  img:hover {
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;
}
.home-bank .product-service .service-wrap .service-item .service-infos {
  /* position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    color: #fff!important;*/
  display: inline-block;
  color: #333 !important;
  width: 343px;
  width: 810px;
  margin: 7px 0 0 34px;
}
.home-bank .product-service .service-wrap .service-item .infos {
  margin: 0;
  line-height: 26px;
  color: #666;
  font-size: 16px;
}
.home-bank .product-service .service-loan .card-item {
  margin: 10px 0;
  z-index: 4;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.12s;
  position: relative;
  float: left;
  /*height: 180px;*/
  /*width: 260px;*/
  width: 100%;
  background: #fff;
}
.home-bank .product-service .service-loan .active {
  width: 100%;
  /*background: #fff url("../../images/co-bank/zhlc/logo.png") 536px 170px no-repeat;*/
}
.home-bank .product-service .service-loan .item-first {
  transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1) 0.18s;
  z-index: 3;
  text-align: left;
  /*width: 100%;*/
  /*position: absolute;
    top: 0;
    left: 0;*/
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(100));
}
.home-bank .product-service .service-loan .item-second {
  transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  z-index: 2;
  /*opacity: 0;*/
  /*position: absolute;
    top: 0;
    left: 290px;*/
  filter: alpha(opacity=0);
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(0));
  display: none;
}
.home-bank .product-service .service-loan .item-first {
  position: relative;
  /*position: absolute;
    top: 0;
    left: 0;*/
  display: inline-block;
  width: 315px;
  height: 200px;
  transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  z-index: 5;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(100));
}
.home-bank .product-service .service-loan .active .item-second {
  /*position: absolute;
    top: 0;
    right: 35px;*/
  margin: 0 45px 0 0;
  transition: all 0.12s cubic-bezier(0.4, 0, 0.2, 1) 0.18s;
  z-index: 3;
  opacity: 1;
  filter: alpha(opacity=100);
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=(100));
}
.home-bank .product-service .service-loan .active .bg {
  display: none;
}
.home-bank .product-service .service-loan .bg {
  width: 100%;
  height: 35px;
  line-height: 35px;
  position: absolute;
  bottom: 0;
  text-align: center;
  color: #fff;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.5);
  display: block;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fffffff, endColorstr=#7fffffff);
}

.home-bank .product-service .service-wrap .infos .infos-title {
  font-size: 20px;
  margin: 15px 0;
}
.home-bank
  .product-service
  .service-wrap
  .service-item
  .service-list
  .service-infos
  .title-text {
  font-size: 16px;
  /*color: #fff;*/
  margin: 0 0 10px;
  /*text-align: center;*/
}
.over-hidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-bank
  .product-service
  .service-wrap
  .service-item
  .service-list
  .line-list {
  font-size: 12px;
  /*color: #fff;*/
  /*margin-bottom: 7px;*/
}
.home-bank
  .product-service
  .service-wrap
  .service-item
  .service-list
  .service-infos
  .service-line {
  float: left;
  width: 49%;
  font-size: 12px;
  /*color: #fff;*/
}
.home-bank
  .product-service
  .service-wrap
  .service-item
  .service-list
  .service-btn {
  display: inline-block;
  width: 80px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  background-color: #3d7db5;
  cursor: pointer;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  margin-top: 15px;
}
.home-bank .product-service .service-wrap .service-investment {
  position: relative;
  float: left;
  margin-left: 51px;
}
.home-bank
  .product-service
  .service-wrap
  .service-item
  .service-list
  .service-infos
  .title-text
  .state {
  float: right;
  font-size: 12px;
  color: red;
}
.home-bank
  .product-service
  .service-wrap
  .service-item
  .service-list
  .service-desc {
  font-size: 12px;
  color: #fff;
  line-height: 28px;
}
.home-bank .service-case .case-item .case-list:first-child {
  margin-left: 26px;
}
.home-bank .service-case {
  /*background-color: #f7f7f7;*/
  height: 591px;
  padding: 35px 0;
  position: relative;
  /*background: url(../../images/co-bank/case-bg.jpg) 0 0 no-repeat;
    background-size: 100% 100%;*/
}
.home-bank .service-case .title,
.home-bank .service-case .title .name {
  color: #fff;
}
.home-bank .service-case .swiper-container {
  width: 1200px;
  margin: 80px auto 0;
  height: 420px !important;
  position: relative;
}

.home-bank .swiper-wrapper {
  margin-top: 0;
}
.home-bank .service-case .swiper-wrapper {
  margin-top: 0;
  width: 1200px;
}
.home-bank .service-case .case-item .case-list {
  /*padding: 0 20px;*/
  background-color: #f7f7f7;
  cursor: pointer;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
}
.home-bank .service-case .case-item .case-list:hover {
  /*-webkit-transform: scale(1.04);
    transform: scale(1.04);*/
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;
}
.home-bank .service-case .swiper-container .swiper-slide {
  width: 372px;
  height: 400px;
  background: #fff;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  /*box-shadow: 0 8px 30px #ddd;*/
}
.home-bank .service-case .case-item .case-list .list-detail {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 320px;
  left: 0;
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  /*box-shadow: 0 2px 8px 0px #DDD;*/
}
.home-bank .service-case .case-item .case-list:hover .list-detail {
  top: 0;
}
.home-bank .service-case .case-item .case-list .case-box {
  position: relative;
  height: 315px;
  /*background: #a37745;
    background: -webkit-gradient(linear,left top,right top,from(#e7c9a5),to(#a37745));
    background: -o-linear-gradient(left,#e7c9a5,#a37745);
    background: linear-gradient(90deg,#e7c9a5,#a37745);*/
}
.home-bank .service-case .case-item .case-list .case-wrap {
  color: #999;
  z-index: 10;
  height: 100%;
  position: relative;
}
/*.home-bank .service-case .list-detail:hover .case-box .case-wrap{
    background: rgba(0,0,0,0.6);
    color: #fff;
}*/
.home-bank .service-case .case-item .case-list:hover .botu {
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
}
.home-bank .service-case .case-item .case-list .case-box .botu {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -webkit-opacity: 0;
  -ms-opacity: 0;
  opacity: 0;
}
.home-bank .service-case .case-item .case-list .case-head {
  position: relative;
  margin: 0 21px 0 13px;
  height: 85px;
  line-height: 85px;
  text-align: left;
  /*border-bottom: 1px solid #d9d9d9;*/
}
.home-bank .service-case .case-item .case-list .case-title {
  color: #fff;
  font-size: 14px;
  /*padding-top: 30px;*/
  margin: 0 20px 15px 10px;
}
.home-bank .service-case .case-item .case-list:hover .case-title {
  color: #fff;
}
.home-bank .service-case .case-item .case-list .case-desc {
  font-size: 14px;
  text-align: left;
  word-wrap: break-word;
  margin: 0 21px 0 12px;
  line-height: 24px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 13;
  -webkit-box-orient: vertical;
}
.home-bank .service-case .case-item .case-list .case-head:after {
  position: absolute;
  bottom: -6px;
  left: 0;
  content: "";
  width: 61px;
  height: 5px;
  /*background-color: #747474; */
}
.home-bank .service-case .case-item .case-list .case-head .logo {
  height: 56px;
  margin-right: 10px;
}
.home-bank .service-case .btn-swipe {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 1450px;
  z-index: 12;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 320px) and (max-width: 1400px) {
  .home-bank .service-case .btn-swipe {
    width: 100%;
  }
}
@media only screen and (max-width: 1200px) {
  .home-bank .service-case .btn-swipe {
    display: none;
  }
}
/*.home-bank .service-case .btn-swipe .swipe-arrow {*/
.home-bank .service-case .swipe-arrow {
  position: absolute;
  width: 73px;
  height: 73px;
  font-size: 50px;
  background-color: #1d3e64 !important;
  border: 0 !important;
  display: block;
  border-radius: 50%;
  outline: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 10;
}
.home-bank .service-case .swipe-left {
  top: 40%;
  left: -100px;
}
.home-bank .service-case .swipe-right {
  top: 40%;
  right: -100px;
}
/*.home-bank .service-case .btn-swipe .swipe-arrow .iconfont{*/
.home-bank .service-case .swipe-arrow .iconfont {
  font-size: 32px;
  color: #fff;
  margin-top: -13px;
  display: inline-block;
}
/*.home-bank .service-case .btn-swipe .swipe-arrow:hover {*/
.home-bank .service-case .swipe-arrow:hover {
  background-color: #3d7db5 !important;
}
.home-bank .price-wrap {
  /*background-color: #f7f7f7;*/
  /*background: #fff;*/
  overflow: hidden;
  margin-bottom: 80px;
  /*padding-top: 70px;*/
}
.home-bank .price-wrap .service-info {
  width: 1125px;
  margin: 0 auto;
  background-color: #fff;
  overflow: hidden;
  height: 290px;
  padding: 5px 35px 5px 40px;
}
.home-bank .price-wrap .price-info {
  float: left;
  width: 591px;
  margin-left: 33px;
}
.home-bank .price-wrap .price-info {
  float: left;
  width: 410px;
}
/*.home-bank .price-wrap .price-info p {*/
.home-bank .price-wrap .price-info .info-detail {
  font-size: 14px;
  color: #646464;
  margin-top: 5px;
  line-height: 23px;
  /*margin-bottom: 18px;*/
}
.home-bank .price-wrap .price-info .info-detail .service-btn {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  background-color: #3d7db5;
  cursor: pointer;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  margin-top: 7px;
}
.home-bank .price-wrap .price-info .info-title {
  font-weight: 700;
  font-size: 20px;
  padding-top: 0;
  margin-top: 40px;
  color: #000;
}
.home-bank .price-wrap .price-info .info-title .icon {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../../images/co-bank/risk1.png) 0 0 no-repeat;
  background-size: 100% 100%;
  margin-right: 10px;
  vertical-align: middle;
}
.home-bank .price-wrap .video-player {
  width: 360px;
  float: left;
  height: 280px;
  margin-top: 43px;
}
.home-bank .price-wrap .chaungchao {
  width: 290px;
  height: 202px;
  float: left;
  margin: 43px 30px 0 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
}
.home-bank .price-wrap .chaungchao:hover {
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;
}
.home-bank .vjs-poster {
  background-color: #fff !important;
}
.home-bank .video-js {
  background-color: #fff;
}
.home-bank .my-video-dimensions {
  width: 100%;
  height: 100%;
}
.home-bank .agency-wrap {
  /*background-color: #fff;*/
  /*height: 493px;*/
  padding-top: 105px;
}
.home-bank .agency-wrap .agency-content {
  width: 1200px;
  margin: 65px auto 30px;
  overflow: hidden;
}
.home-bank .agency-wrap .agency-content .agency-list {
  width: 187px;
  height: 58px;
  float: left;
  margin-right: 13px;
  margin-bottom: 47px;
  text-align: center;
  line-height: 58px;
  font-size: 18px;
  color: #9b9b9b;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.home-bank .agency-wrap .agency-content .agency-list img {
  width: 187px;
  height: 58px;
  cursor: pointer;
}
.home-bank .agency-wrap .agency-content .agency-list img:hover {
  border: 1px solid #dcd9d9;
}
.home-bank .about-wrap {
  background: #f7f9fb;
  height: 494px;
  color: #fafafa;
  width: 100%;
  min-width: 1200px;
  position: relative;
  z-index: 2;
  background: url(../../images/co-bank/about.jpg) no-repeat center top;
  background: 100% auto;
  margin-top: 50px;
}
.home-bank .about-wrap .about-box {
  position: relative;
  width: 1200px;
  margin: 0 auto;
}
.home-bank .about-wrap .about-content {
  display: inline-block;
  font-size: 18px;
  width: 380px;
  height: 405px;
  padding: 45px 40px;
  text-align: left;
  line-height: 38px;
  background: url(../../images/co-bank/about_bg.png) repeat;
}
.home-bank .about-wrap .about-content .about-title {
  width: 405px;
  padding-left: 20px;
  height: 105px;
  font-size: 24px;
  font-weight: bold;
  line-height: 145px;
  margin-bottom: 18px;
  background: url(../../images/co-bank/name.png) no-repeat center left;
}
.home-bank .about-wrap .about-content .about-desc {
  font-size: 16px;
}
.home-bank .about-wrap .btns {
  position: absolute;
  right: 100px;
  top: 45%;
  font-size: 18px;
  text-align: center;
}
.home-bank .about-wrap .btns .btn-apply,
.home-bank .about-wrap .btns .btn-concat {
  height: 60px;
  border-radius: 40px;
  -webkit-border-radius: 40px;
  text-align: center;
  line-height: 60px;
}
.home-bank .about-wrap .btns .btn-concat {
  display: block;
  width: 324px;
  color: #3c3c3c;
  background-color: #fff;
  -webkit-box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.06);
  box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.06);
}
.box-pack-center {
  -webkit-box-justify-content: center;
  -moz-align-justify-content: center;
  -webkit-align-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.box {
  display: -webkit-box;
  display: box;
  display: -ms-flexbox;
  display: flex;
}
.box-align-center {
  -moz-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.home-bank .footer {
  height: 138px;
  background-color: #111820;
  padding-top: 32px;
  font-size: 14px;
  color: #b1b1b1;
}
.home-bank .footer .footer-wrap {
  width: 1200px;
  margin: 0 auto;
  text-align: center;
  color: #808080;
}
.home-bank .footer .footer-wrap .footer-logo {
  display: inline-block;
}
.home-bank .footer .footer-wrap .logo {
  width: 150px;
  margin-right: 30px;
  vertical-align: initial;
}
.home-bank .footer .footer-wrap .footer-info {
  display: inline-block;
}
.home-bank .footer .footer-wrap p {
  margin: 15px 0;
  text-align: left;
}
.home-bank .news-wrap {
  padding-top: 105px;
  /*background-color: #fff;*/
  /*padding-bottom: 115px;*/
  overflow: hidden;
}
.home-bank .news-wrap .news-content {
  width: 1200px;
  margin: 65px auto 0;
}
.home-bank .news-wrap .news-content .swiper-container {
  width: 535px;
  height: 351px !important;
  margin-right: 23px;
}
.home-bank .news-wrap .swiper-container .swiper-slide .new-banner {
  width: 100%;
  height: 100%;
}
.home-bank .news-wrap .news-content .swiper-slide {
  width: 100%;
  height: 100%;
  display: inline-block;
  overflow: hidden;
  z-index: 0;
  position: relative;
}
.home-bank .news-wrap .news-content .swiper-wrapper {
  width: 100%;
  height: 100%;
}
.home-bank .news-wrap .news-content .swiper-slide .news-modal {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: rgba(0, 0, 0, 0.2);
}
.home-bank .news-wrap .news-content .swiper-slide .news-text {
  position: absolute;
  bottom: 8px;
  left: 16px;
  color: #fff;
  font-size: 18px;
}
.home-bank .news-wrap .news-content .news-nums {
  position: absolute;
  bottom: 5px;
  right: 15px;
  z-index: 1001;
}
.home-bank .news-wrap .news-content .news-nums .new-num.active {
  background-color: #ffff50;
}
.home-bank .news-wrap .news-content .news-nums .new-num {
  width: 20px;
  height: 20px;
  font-size: 14px;
  color: #5a5a5a;
  text-align: center;
  line-height: 20px;
  background-color: #fff;
  margin: 5px;
  border: 0;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  cursor: pointer;
}
.home-bank .news-wrap .news-content .news-item {
  margin-left: 23px;
  width: 565px;
}
.home-bank .news-wrap .news-content .news-item .news-list {
  margin-bottom: 30px;
}
.home-bank .news-wrap .news-content .news-item .news-list .dates {
  width: 72px;
  height: 64px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 14px;
  color: #fff;
}
.home-bank .news-wrap .news-content .news-item .news-list .dates div {
  height: 32px;
  text-align: center;
  line-height: 32px;
  background-color: #dbe650;
}
.home-bank
  .news-wrap
  .news-content
  .news-item
  .news-list
  .dates
  div:last-child {
  background-color: #8992ff;
}
.home-bank .news-wrap .news-content .news-item .news-list .news-infos {
  width: 480px;
  margin-left: 10px;
}
.home-bank
  .news-wrap
  .news-content
  .news-item
  .news-list
  .news-infos
  .news-title {
  display: block;
  position: relative;
  top: -3px;
  color: #5a5a5a;
  font-size: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  /*line-height: 22px;*/
}
.home-bank
  .news-wrap
  .news-content
  .news-item
  .news-list
  .news-infos
  .news-desc {
  display: block;
  position: relative;
  bottom: -1px;
  color: #bababa;
  font-size: 14px;
}

.home-bank .news-wrap .news-left {
  background: #1d3e64;
  color: #fff;
  overflow: hidden;
  width: 380px;
  height: 380px;
}
.home-bank .news-wrap ._news-content {
  width: 1200px;
  margin: 40px auto 0;
  overflow: hidden;
}
.home-bank .news-wrap .news-left .news-list {
  width: 300px;
  margin: 0 auto;
}
.home-bank .news-wrap .news-left .news-list h1 {
  color: #fff;
  font-size: 22px;
  padding-top: 18px;
}
.home-bank .news-wrap .news-left .list {
  /*padding: 25px 0;*/
}
.home-bank .news-wrap .news-left .list .news-title {
  font-size: 16px;
  color: #dee0e3;
  margin: 25px 0 10px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.home-bank .news-wrap .news-left .list .news-title:hover {
  color: #fff;
}
.home-bank .news-wrap .news-left .list .news-time {
  display: block;
  font-size: 14px;
  color: #b4b3b3;
}
.home-bank .news-wrap .news-right {
  width: 790px;
  height: 380px;
}
.home-bank .news-wrap .news-right .wz_list {
  width: 300px;
  padding: 0 40px;
  color: #a6adb4;
  line-height: 24px;
  text-align: left;
}
.home-bank .news-wrap .news-right .swiper-container {
  background: #fff;
}
.home-bank .news-wrap .news-right .wz_list h1 {
  color: #000;
  font-size: 22px;
  padding: 15px 0;
}

.home-bank .news-wrap .news-right .wz_list .last a {
  font-size: 16px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.home-bank .news-wrap .news-right .wz_list .last a:hover {
  font-size: 16px;
  color: #000;
}
.home-bank .news-wrap .news-right .wz_list .time {
  display: block;
  padding-top: 6px;
  font-size: 14px;
}
.home-bank .news-wrap .news-right .wz_list .detail {
  padding-top: 20px;
  background: url(../../images/co-bank/line.gif) no-repeat left top;
  margin-top: 25px;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.home-bank .news-wrap .news-right .swiper-container .pagination {
  position: absolute;
  z-index: 20;
  left: 0;
  bottom: 30px;
}
.home-bank
  .news-wrap
  .news-right
  .swiper-container
  .swiper-pagination-bullet-active {
  opacity: 1;
  background: #3d7db5;
}
.question-banner {
  height: 100% !important;
  /*background: url(../../images/co-bank/question1.jpg) 0 0 no-repeat;
    background-size: 100% 100%;*/
}
#question .swiper-container {
  height: 100% !important;
}
#question .swiper-container li.swiper-slide {
  position: relative;
}
#question .question-wrap .question-title {
  text-align: center;
  color: #3d7db5;
  font-size: 28px;
  margin: 0 0 18px 0;
  /*background: url(../../images/co-bank/_logo.png) 0 0 no-repeat;*/
}
#question .question-wrap .question-detail {
  text-align: left;
}
#question .question-wrap .question-detail > div {
  display: inline-block;
  float: left;
}
#question .question-wrap .question-detail.mult-detail1 {
  width: 452px;
}
#question .question-wrap .question-detail.mult-detail2 {
  width: 440px;
}
#question .question-wrap {
  display: inline-block;
  position: absolute;
  top: 45%;
  left: 50%;
  background: #f7f9fb;
  border-radius: 10px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}
#question .question-wrap label {
  display: inline-block;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  margin: 0 0 12px;
  padding-left: 30px;
  color: #3d7db5;
}
#question .question-wrap.one input[type="radio"],
#question .question-wrap.mult input[type="checkbox"] {
  opacity: 0;
  display: none;
}
body#body {
  min-width: 100%;
  height: 100%;
}
#question .question-wrap.one label {
  /*background: url(../../images/co-bank/default.png) 0 6px no-repeat;
    background-size: 20px auto;*/
  white-space: nowrap;
  padding: 10px 20px;
  border-radius: 40px;
  border: 1px solid #3d7db5;
  color: #3d7db5;
}
#question .question-wrap.mult label {
  /*background: url(../../images/co-bank/_default.png) 0 6.5px no-repeat;
    background-size: 20px auto; */
  padding: 10px 20px;
  border-radius: 40px;
  border: 1px solid #3d7db5;
  color: #3d7db5;
  margin-right: 10px;
}
/*#question .question-wrap label.other{
    background-position: 0px 20px;
}*/
#question .question-wrap label.curr {
  background: #3d7db5;
  /*background-position: 0px -96px;*/
  color: #fff;
}
/*
#question .question-wrap label.other.curr{
    background-position: 0px -24px;
}*/

#question .swiper-container button.arrow {
  display: inline-block;
  padding: 10px 25px;
  background-image: linear-gradient(#5991c8, #3d7db5);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3em;
  box-shadow: 0 1px white inset;
  text-align: center;
  text-shadow: 0 1px 1px black;
  color: white;
  font-weight: bold;
  outline: none;
  font-size: 14px;
}
#question .swiper-container button.arrow.arrow-l {
  margin-right: 35px;
}
#question .swiper-container button:active {
  box-shadow: 0.05em 0.1em 0.2em rgba(0, 0, 0, 0.6) inset;
  border-color: rgba(0, 0, 0, 0.3);
  background: #5991c8;
}

#question .swiper-container .btn-swipe {
  top: 88%;
}
.biyTip {
  position: fixed;
  color: rgb(221, 35, 35);
  pointer-events: none;
  user-select: none;
  z-index: 500;
  font-size: 28px;
  /*animation: eyRqgI 2s ease-out forwards;*/
}
.mask {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  opacity: 0.5;
  filter: alpha(opacity=50);
  width: 100%;
  height: 100%;
  background: #000;
}
.head-analyse {
  position: fixed;
  width: 420px;
  height: 490px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*margin: -318px 0 0 -275px;*/
  background: #fff;
  font-size: 18px;
  z-index: 999999;
  text-align: center;
  border-radius: 5px;
}
.head-analyse .people {
  /*margin-top: 40px;*/
  width: 100%;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.head-analyse .word > div {
  position: absolute;
  display: inline-block;
  color: rgb(55, 55, 55);
  font-size: 16px;
  padding-left: 30px;
  background: url(../../images/co-bank/any.png) 0px 0 no-repeat;
  background-size: 21px auto;
}
.head-analyse .word > div.word0 {
  top: 90px;
  left: 30px;
}
.head-analyse .word > div.word1 {
  top: 70px;
  left: 365px;
}
.head-analyse .word > div.word2 {
  top: 130px;
  left: 365px;
}
.head-analyse .word > div.word3 {
  top: 150px;
  left: 30px;
}
.head-analyse .word > div.word4 {
  top: 190px;
  left: 365px;
}
.head-analyse .word > div.word5 {
  top: 210px;
  left: 30px;
}
.head-analyse .word > div.word6 {
  top: 250px;
  left: 365px;
}
.head-analyse .word > div.word7 {
  top: 270px;
  left: 30px;
}
.head-analyse .word > div.word8 {
  top: 310px;
  left: 365px;
}
.head-analyse .word > div.word9 {
  top: 330px;
  left: 30px;
}
.head-analyse .word > div.word10 {
  top: 370px;
  left: 365px;
}
.head-analyse .word > div.word11 {
  top: 390px;
  left: 30px;
}
.head-analyse .word > div.word12 {
  top: 450px;
  left: 30px;
}
.head-analyse .word > div.word13 {
  top: 510px;
  left: 30px;
}
.head-analyse .result {
  /*position: absolute;*/
  display: inline-block;
  text-align: left;
  color: rgb(55, 55, 55);
  font-size: 20px;
  margin: 10px 0;
  /*right: 10px;
    bottom: 100px;*/
}
.head-analyse .result span {
  font-size: 30px;
  color: #3d7db5;
}
.head-analyse button.arrow {
  display: inline-block;
  padding: 10px 20px;
  background-image: linear-gradient(#5991c8, #3d7db5);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3em;
  box-shadow: 0 1px white inset;
  text-align: center;
  text-shadow: 0 1px 1px black;
  color: white;
  font-weight: bold;
  outline: none;
  margin-top: 20px;
  vertical-align: bottom;
  font-size: 14px;
  cursor: pointer;
}
.head-analyse button.arrow.login {
  padding: 15px 20px;
}
.head-analyse button.arrow:active {
  box-shadow: 0.05em 0.1em 0.2em rgba(0, 0, 0, 0.6) inset;
  border-color: rgba(0, 0, 0, 0.3);
  background: #3d7db5;
}
#about .user-info {
  display: inline-block;
  position: absolute;
  top: 230px;
  right: 65px;
  width: 50%;
}
#about .user-info input[type="tel"],
#about .user-info input[type="text"] {
  width: 35%;
  padding: 15px;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  float: left;
  color: #fff;
  outline: none;
  border: 1px solid #fff;
  border-right: none;
  background: none;
  -webkit-appearance: none;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  transition: 0.5s all;
}
#about .user-info input[type="submit"] {
  float: left;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  outline: none;
  padding: 15px 30px;
  border: 1px solid #fff;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  transition: 0.5s all;
  -webkit-appearance: none;
  background: none;
  cursor: pointer;
}
/* 占位符颜色 */
input::-webkit-input-placeholder {
  color: #fff;
}
input:-moz-placeholder {
  color: #fff;
}
input::-moz-placeholder {
  color: #fff;
}
input:-ms-input-placeholder {
  color: #fff;
}
.question-alert input[type="text"] {
  width: 70%;
  padding: 10px;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  float: left;
  color: #fff;
  outline: none;
  border: 1px solid #fff;
  border-right: none;
  background: none;
  -webkit-appearance: none;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  transition: 0.5s all;
  border-radius: 0;
}
.question-alert input[type="submit"] {
  width: 20%;
  padding: 10px;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  float: left;
  color: #fff;
  outline: none;
  border: 1px solid #fff;
  background: none;
  -webkit-appearance: none;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  transition: 0.5s all;
  border-radius: 0;
}
.question-alert.define_alert .la_cont {
  min-height: 250px;
}
@media screen and (max-width: 750px) {
  #question .question-wrap {
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
  }
  #question .question-wrap .question-title {
    font-size: 1.35em;
    margin: 0 0 0.5em 0;
    text-align: center;
  }
  #question .question-wrap.mult {
    width: 99%;
  }
  #question .question-wrap .question-detail.mult-detail1,
  #question .question-wrap .question-detail.mult-detail2 {
    width: 100%;
  }
  #question .question-wrap label {
    display: inline-block;
    color: #fff;
    font-size: 0.9em;
    cursor: pointer;
    margin: 0 0 0.65rem;
    padding-left: 1.875em;
  }
  #question .question-wrap.one label {
    /*background: url(../../images/co-bank/default.png) 0 3px no-repeat;
        background-size: 13px auto;*/
    white-space: nowrap;
    padding: 8px 15px;
  }
  #question .question-wrap.mult label {
    /*background: url(../../images/co-bank/_default.png) 0 2.5px no-repeat;
        background-size: 13px auto;*/
    white-space: normal;
    padding: 6px 10px;
  }
  #question .question-wrap label.curr {
    background-position: 0px -64px;
    color: #fff;
  }
  #question .question-wrap._one label {
    margin: 0 0 0.2rem;
    white-space: normal;
  }
  #question .question-wrap._one {
    width: 85%;
  }
  #question .swiper-container button.arrow {
    padding: 0.48em 1.4em;
    font-size: 0.8em;
  }
  #question .swiper-container .btn-swipe {
    top: 92%;
  }
  .biyTip {
    font-size: 14px;
  }
  .question-alert.define_alert .la_cont {
    padding: 10px !important;
    min-width: 280px !important;
    min-height: 200px !important;
    font-size: 12px !important;
  }
  #question .swiper-container button.arrow.arrow-l {
    margin-right: 10px;
  }
  .question-alert input[type="text"],
  .question-alert input[type="submit"] {
    font-size: 12px;
    max-height: 38px;
    min-height: 16px;
  }
  .head-analyse {
    width: 87%;
    height: auto;
    padding: 50px 0;
  }
  .head-analyse .result span {
    font-size: 26px;
  }
  .head-analyse button.arrow {
    padding: 6px 13px;
    font-size: 14px;
  }
  .head-analyse button.arrow.login {
    padding: 10px 15px;
  }
  .head-analyse .result {
    font-size: 16px;
    margin: 7px 0;
  }
  .home-bank .service-case .swipe-left {
    left: 5px;
  }
  .home-bank .service-case .swipe-right {
    right: 5px;
  }
}
@media screen and (max-width: 340px) {
  #question .question-wrap._one {
    width: 100%;
  }
  #question .question-wrap._one label {
    white-space: normal;
    padding: 2px 10px;
  }
  .head-analyse {
    width: 87%;
    height: auto;
    padding: 20px 0;
  }
  .head-analyse .result {
    font-size: 14px;
    margin: 7px 0;
  }
  .head-analyse .result span {
    font-size: 24px;
  }
  .head-analyse button.arrow {
    padding: 5px 8px;
    font-size: 12px;
  }
}
.home-bank .jarallax {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.home-bank .service-case.testimonial {
  background: url(../../images/co-bank/case-bg.jpg) no-repeat 0px 0px;
  /*background: url(../../images/co-bank/banner3.jpg) no-repeat 0px 0px;*/
  background-size: cover;
}
.home-bank .about-wrap.testimonial {
  background: url(../../images/co-bank/about.jpg) no-repeat 0px 0px;
  background-size: cover;
}

.close {
  position: absolute;
  right: 5px;
  top: 5px;
  cursor: pointer;
}
.about-box .analyse {
  z-index: 1;
  width: 200px;
  height: 200px;
  background: url(../../images/co-bank/round.png) no-repeat;
  background-size: cover;
  position: absolute;
  top: 150px;
  right: 60px;
  -webkit-animation: show 1.4s infinite;
  animation: anima 1.4s infinite;
}
@-webkit-keyframes anima {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  50% {
    opaicty: 0.6;
    -webkit-transform: scale(1.3);
  }
  100% {
    opacity: 0.2;
    -webkit-transform: scale(1.5);
  }
}

@keyframes anima {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opaicty: 0.6;
    transform: scale(1.3);
  }
  100% {
    opacity: 0.2;
    transform: scale(1.5);
  }
}
.about-box .analyse-go {
  display: inline-block;
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  color: #fff;
  position: absolute;
  top: 215px;
  right: 124px;
  z-index: 2;
  cursor: pointer;
  background: url(../../images/co-bank/go.png) no-repeat;
  background-size: cover;
  font-size: 20px;
}
.about-box .analyse-go a {
  color: #fff;
  font-size: 20px;
}
.about-box .analyse-word {
  display: inline-block;
  text-align: center;
  color: #fff;
  position: absolute;
  top: 305px;
  right: 72px;
  font-size: 16px;
  z-index: 3;
  padding: 6px 20px;
  border-radius: 20px;
  background: rgba(31, 33, 55, 0.8);
}
.BMap_cpyCtr,
.anchorBL {
  display: none !important;
}

.btn-link {
  position: relative;
  border: 1px solid #3d7db5;
}
.btn-link a.button {
  display: inline-block;
  width: 100%;
  height: 100%;
  color: #3d7db5 !important;
  transition: all 0.2s ease-in-out;
  margin-left: 0 !important;
  /*  position: relative;
  overflow: hidden;*/
}
.btn-link a.button:before {
  content: "";
  background-color: rgba(255, 255, 255, 0.5);
  height: 100%;
  width: 1em;
  display: block;
  position: absolute;
  top: 0;
  left: -1.75em;
  transform: skewX(-45deg) translateX(0);
  transition: none;
}
.btn-link a.button:hover {
  background-color: #3d7db5;
  color: #fff !important;
  border-bottom: 4px solid darken(#3d7db5, 10%);
}
.btn-link a.button:hover:before {
  transform: skewX(-45deg) translateX(13.5em);
  transition: all 0.5s ease-in-out;
}
@keyframes sheen {
  0% {
    transform: skewY(-45deg) translateX(0);
  }
  100% {
    transform: skewY(-45deg) translateX(5.5em);
  }
}
</style>
